<template>
  <div class=" flex  h-100% ml-20px" style="background-color: #fff;border-radius: 10px;">
    <!-- <ContentWrap class=""> -->
    <DepartmentTree ref="departmentTreeRef" @node-change="handleNodeChange" />
    <div class="tableManage " style="width:calc(100% - var(--left-tree-max-width))">
      <ContentWrap  class="ml-10px">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
            <component v-if="activeName === tab.name" :is="tab.component" :current-node-key="currentNodeKey" :currentNode="currentNode" :type="tab.type" />
          </el-tab-pane>
        </el-tabs>
      </ContentWrap>
    </div>
    <!-- </ContentWrap> -->
  </div>
</template>

<script setup lang="tsx">
import { ref, shallowRef } from 'vue'
import { ContentWrap } from '@/components/ContentWrap'

import type { DepartmentItem } from "@/components/DepartmentTree/types";
import {ElTabPane,ElTabs} from 'element-plus'
import DepartmentTree from '@/components/DepartmentTree/index.vue'
import { useDepartmentStore } from '@/store/modules/departmentStore'
import type { TabsPaneContext } from 'element-plus'

// 导入各个组件（请根据实际路径调整）
import DomesticComponents from '@/views/productDataManagement/domesticComponents/index.vue' //国产元器件
import ImportedComponents from '@/views/productDataManagement/importedComponents/index.vue' //进口元器件
import DomesticMaterials from '@/views/productDataManagement/domesticMaterials/index.vue' //国产材料
import ImportedMaterials from '@/views/productDataManagement/importedMaterials/index.vue' //进口材料
import DomesticMeProducts from '@/views/productDataManagement/domesticMeProducts/index.vue' // 国产机电产品
import ImportedMeProducts from '@/views/productDataManagement/importedMeProducts/index.vue' // 国产机电产品
import DomesticSoftware from '@/views/productDataManagement/domesticSoftware/index.vue' //国产软件
import ImportedSoftware from '@/views/productDataManagement/importedSoftware/index.vue' //进口软件



const departmentStore = useDepartmentStore()

// 从store中获取当前节点key
const currentNodeKey = ref(departmentStore.currentNodeKey)



// 获取部门树组件引用
const departmentTreeRef = ref<InstanceType<typeof DepartmentTree>>()
const currentNode = ref()
// 处理部门树节点变化
const handleNodeChange = (node: DepartmentItem) => {
  console.log('处理部门树节点变化',node.departmentName,node);
currentNode.value = node.departmentName
  currentNodeKey.value = node.id
}

// 动态标签页配置
const tabs = ref([
  {
    label: '国产元器件',
    name: 'domesticComponents',
    component: shallowRef(DomesticComponents)
  },
  {
    label: '进口元器件',
    name: 'importedComponents',
    component: shallowRef(ImportedComponents)
  },
  {
    label: '国产材料',
    name: 'domesticMaterial',
    component: shallowRef(DomesticMaterials),
    type: 'domestic'
  },
  {
    label: '进口材料',
    name: 'importedMaterial',
    component: shallowRef(ImportedMaterials),
    type: 'imported'
  },
  {
    label: '国产机电产品',
    name: 'domesticElectromechanical',
    component: shallowRef(DomesticMeProducts),
    type: 'domestic'
  },
  {
    label: '进口机电产品',
    name: 'importedElectromechanical',
    component: shallowRef(ImportedMeProducts),
    type: 'imported'
  },
  {
    label: '国产软件',
    name: 'domesticSoftware',
    component: shallowRef(DomesticSoftware),
    type: 'domestic'
  },
  {
    label: '进口软件',
    name: 'importedSoftware',
    component: shallowRef(ImportedSoftware),
    type: 'imported'
  }
])

// 默认激活第一个标签
const activeName = ref(tabs.value[0].name)

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log('切换标签:', tab.props.name, event)
}
</script>

<style scoped lang="less">
.el-card {
  overflow-x: auto;
}

:deep(.el-tabs__content) {
  overflow: visible;
}
</style>
